
.white{color:$white!important;}
.black {color: $black!important;}
.black-2 {color: $black-2	 !important;}
.blue {
	color: $blue!important;
}
.gray {
	color: $gray!important;
}
.pink {
	color: #FC3E98;
}
// 边框颜色
.border1{
   border: 1px  solid #B1B1B1;	
}
.border2{
   border: 1rpx  solid #F5F5F5;	
}
.border3{
   border: 1rpx  solid #DCDCDC;	
}
.bg-blue {
	background-color: $blue!important;
}
.bg-red {
	background-color: $red!important;
}
.bg-white {
	background-color: #fff!important;
}
.bg-gray{
	background-color: #999999!important;
}
.bg-block2{
	background-color: #F4F5F6!important;
}
.color-gray {
	color: #999999!important;
}
//文字相关
.text-l {
  text-align: left;
}
.text-c {
  text-align: center;
}
.text-r {
  text-align: right;
}
.box-shad{
	box-shadow:  0px 3px 6px 1px rgba(0,0,0,0.16);
}
.box-shad-xs{
	box-shadow:0px 0px 2rpx 1rpx #aaa ;
}
.minbold{
	font-weight: 500;
}
.bold {
  // font-weight: 700;
	font-weight: bold;
}

// .btn {
// 	color:$white ;
// 	background-color: $green;
// 	text-align: center;
// 	height: 60rpx;
// 	line-height: 60rpx;
// 	border-radius: 52rpx;
// }
//flex
.bs-bx {
	box-sizing: border-box;
}
.po-r {
	position: relative;
}

.po-a {
	position: absolute;
}

.po-atl {
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.po-at {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.po-f {
	position: fixed;
}

.flex{
	display: flex!important;
}

.flex-a {
	display: flex;
	align-items: center;
}

.flex-jb {
	display: flex;
	justify-content: space-between;
}

.flex-c{
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex-b{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.flex-sa{
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.flex1{
	flex: 1;
	align-items: center;
}
.flex-l{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.flex-r{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.flex-column{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
}
.flex-column1{
		display: flex;
		flex-direction: column;
		align-items: center;	
}
.flex-column2{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
}
.flex-start{
	justify-content: flex-start!important;
}
.flex-end{
	justify-content: flex-end;
}
.flex-center{
	justify-content: center;
}
.flex-around{
	justify-content: space-around;
}
.flex-between{
	justify-content: space-between;
}
.flex-top{
	align-items: flex-start;
}
.flex-middle{
	align-items: center;
}
.flex-bottom{
	align-items: flex-end;
}
.flex-column3{
	flex-direction: column!important;
}
.flex-row{
	flex-direction: row;
}
.flex-wrap{
	flex-wrap: wrap;
}
.nowrap{
	flex-wrap: nowrap;
}
.text-nowrap{
	white-space:nowrap;
}
.flex-g{
	flex-grow: 1;
}
.f1 {
	flex: 1;
}

/* 边框 */
.border-b {
	border-bottom: 1rpx solid gray-2;
}
/* 边框 */
.border-t {
	border-top: 1rpx solid gray-2;
}
/* 全屏 */
.vw100 {
  width:100vw !important;
}
.vh100 {
  height:100vh !important;
}
.min100 {
  min-height:100vh !important;
}
.h100 {
  height:100% !important;
}
.w100 {
  width:100% !important;
}
/* 布局相关 */
.auto-x{
	margin: 0 auto;
}
.rela{
	position: relative;
}
.border-box {
	box-sizing: border-box;
}
.abs{
	position: absolute;
	z-index: 9;
}
.fixed{
	position: fixed;
}
.fixed-b{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.i-block{
	display: inline-block;
}
.block{
	display: block;
}
.hide {
  display: none;
}
.show {
  display: block;
}
//其他
.over-h {
  overflow: hidden;
}
.over-a {
	overflow: auto;
}
// padding margin
@for $value from 0 through 1000{
  .p-x-#{$value} {
	  padding-left: $value*1rpx;
		padding-right: $value*1rpx;
  }
  .p-y-#{$value} {
  	  padding-top: $value*1rpx;
			padding-bottom: $value*1rpx;
  }
  .m-x-#{$value} {
  	  margin-left: $value*1rpx;
			margin-right:$value*1rpx;
  }
  .m-y-#{$value} {
  	  margin-top: $value*1rpx;
			margin-bottom: $value*1rpx;
  }
    .p-t-#{$value} { padding-top: $value*1rpx; }
    .p-b-#{$value} { padding-bottom: $value*1rpx; }
    .p-l-#{$value} { padding-left: $value*1rpx; }
   .p-r-#{$value} { padding-right: $value*1rpx; }
    .m-t-#{$value} { margin-top: $value*1rpx; }
   .m-b-#{$value} { margin-bottom: $value*1rpx; }
   .m-l-#{$value} { margin-left: $value*1rpx; }
  .m-r-#{$value} { margin-right: $value*1rpx; }
}


@for $value from 0 through 10{
  .opacity-#{$value} {
	  opacity: $value / 10;
  }

}

// size
@for $value from 20 through 100{
  .size-#{$value}{ font-size: $value*1rpx; }
}

@for $value from 0 through 50{
  .radius-#{$value}{ border-radius: $value*1rpx; }
}

.radius {
    border-radius: $border-radius-md;
}
// 字体尺寸
.size-base {
	font-size: $font-size-base; //6
}
.size-xs {
    font-size: $font-size-xs;   //12
}
.size-sm {
    font-size: $font-size-sm;   //14
}
.size-md {
    font-size: $font-size-md;   //16
}
.size-lg {
    font-size: $font-size-lg;   //18
}
.size-xl {
    font-size: $font-size-xl;   //20
}

// 边框
$dir1: (top t, right r, bottom b, left l);
$dir2: (top left tl, top right tr, bottom right br, bottom left bl);
.radius-xs {
    border-radius: $border-radius-xs!important;
}
.radius-sm {
    border-radius: $border-radius-sm!important;
}

.radius-md {
    border-radius: $border-radius-md!important;
}

.radius-lg {
    border-radius: $border-radius-lg!important;
}

.radius-max {
    border-radius: $border-radius-max!important;
}

@each $item1, $item2, $item3 in $dir2 {
    .radius-#{$item3}-xs {
        border-#{$item1}-#{$item2}-radius: $border-radius-xs;
    }
    .radius-#{$item3}-sm {
        border-#{$item1}-#{$item2}-radius: $border-radius-sm;
    }

    .radius-#{$item3}-md {
        border-#{$item1}-#{$item2}-radius: $border-radius-md;
    }

    .radius-#{$item3}-lg {
        border-#{$item1}-#{$item2}-radius: $border-radius-lg;
    }

    .radius-#{$item3}-max {
        border-#{$item1}-#{$item2}-radius: $border-radius-max;
    }
}


@each $idx, $var in $pad {
    // 外间距
    .m-#{$idx} {
        margin: $var !important;
    }

    .m-x-#{$idx} {
        margin-left: $var !important;
        margin-right: $var !important;
    }

    .m-y-#{$idx} {
        margin-top: $var !important;
        margin-bottom: $var !important;
    }

    @each $item1, $item2 in $dir1 {
        .m-#{$item2}-#{$idx} {
            margin-#{$item1}: $var !important;
        }
    }

    // 内间距
    .p-#{$idx} {
        padding: $var !important;
    }

    .p-x-#{$idx} {
        padding-left: $var !important;
        padding-right: $var !important;
    }

    .p-y-#{$idx} {
        padding-top: $var !important;
        padding-bottom: $var !important;
    }

    @each $item1, $item2 in $dir1 {
        .p-#{$item2}-#{$idx} {
            padding-#{$item1}: $var !important;
        }
    }
}
$i: 1;
// 尺寸 1-150
@while $i <=1500 {
    .w-#{$i} {
        width: $i + rpx;
    }
	.w--#{$i} {
	    width: $i#{"%"} ;
	}
	.line-h-#{$i} { line-height: $i*1rpx; }
    .min-w-#{$i} {
        min-width: $i + rpx;
    }
    .max-w-#{$i} {
        max-width: $i + rpx;
    }
    
    .h-#{$i} {
        height: $i + rpx;
    }
	.h--#{$i} {
	    height: $i#{"%"} ;
	}
    .min-h-#{$i} {
        min-height: $i + rpx;
    }
    .max-h-#{$i} {
        max-height: $i + rpx;
    }

    $i: $i + 1;
}

// 尺寸 10-600（10的整数）
$i: 1;
@while $i <=60 {
    ._w#{$i} {
        width: $i*10 + rpx;
    }
    ._h#{$i} {
        height: $i*10 + rpx;
    }
    $i: $i + 1;
}



// 移动端1px问题
@each $item1, $item2 in $dir1 {
    .border-#{$item2} {
        position: relative;

        &::after {
            @include harirline-common();
            border-#{$item1}: 2rpx
			 solid $border-color;
        }
    }
    .border-#{$item2}-0 {
        &::after {
            border-#{$item1}: 0 !important;
        }
    }
    // .border-#{$item2}-0 {
    //     border-#{$item1}: 0 !important;
    // }
}


// 多行文本超出隐藏
$i: 1;
@while $i<=4 {
    .eps-#{$i} {
        @include eps($i);
    }

    $i: $i + 1;
}

